<template>
  <div class="table">
    <el-table :data="tableData"  border  fit 
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)">
      <el-table-column type="selection" width="48"></el-table-column>
        <el-table-column v-for="(th,key) in tableHeader"
         :key="key"
         :prop="th.prop"
         :label="th.label"
         :fixed="th.fixed" :min-width="th.minWidth"
         :width="th.width" align="center">
          <template slot-scope="scope">
            <div v-if="th.oper">
              <el-button v-for="(o, index) in th.oper"  :key="index"  type="text"   size="small" @click='o.clickFun(scope.row,scope.$index,tableData)'>
                {{o.name}}
              </el-button>
            </div>
            <div v-else-if="th.isImg">
              <el-image
                class='img'
                :src="scope.row[th.prop]"
                :preview-src-list="[scope.row[th.prop]]"
                :title="th.title"
              ></el-image>
            </div>
            <div v-else-if="th.isText">
              <el-input
                type="textarea"
                show-word-limit
                maxlength="30" 
                ref='note'
                :autosize="{ minRows: 2, maxRows:5}"
                placeholder="请输入内容"
                v-model="scope.row.note">
              </el-input>   
            </div>
            <div v-else-if="th.isSwicth">
              <el-switch
                 v-model="scope.row[th.prop]"
                 :active-value=1
                 :inactive-value=0
                 @change='changeSwitch($event,scope.row.id)'>
              </el-switch>
              <template v-if='!th.isUser'>
                {{scope.row[th.prop]?'是':'否'}}
              </template>
              <template v-else>
                {{scope.row[th.prop]?'正常':'禁用'}}
              </template>
            </div>
            <div v-else-if="th.isLink">
              <a :href="scope.row[th.prop]" target="_blank" :title='scope.row[th.prop]' title='单击在新窗口打开网址' >{{scope.row[th.prop]}}</a>
            </div>
            <div v-else-if="th.isCopy">
              <el-input
                type="textarea"
                readonly
                class='copy'
                @click.native='copy($event)'
                :autosize="{ minRows: 3, maxRows: 7}"
                v-model="scope.row[th.prop]">
              </el-input>   
            </div>
            <div v-else>
              <span>{{ scope.row[th.prop]}}</span>
            </div>
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination"  v-show='total>0'>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page"
        background
        layout="total,prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default{
    name:'tableTest',
    data() {
      return {
        multipleSelection: []
      };
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      tableHeader: {
        type: Array,
        default: function () {
          return []
        }
      },
      loading: {
        type: Boolean,
        default: false
      },
      total:Number,
      page:Number,
      test1:String
    },
    methods:{
      handleCurrentChange(page){
        let main=document.querySelector('main');
        main.scrollTop=50;
        this.$emit('changePage',page);
        // 之所以用发送自定义事件是因为使用"update:属性名后，父组件用watch，父组件删除数据后页码改变会重复请求相同的数据。
        // this.$emit("update:page",page);
      },
      handleSelectionChange(item){
        this.$emit('selectionChange',item);
        // this.multipleSelection = item;
      },
      changeSwitch(value,imgId){
        this.$emit('changeSwitch',value,imgId);
      },
      copy(This){
        this.$emit('copyText',This);
      }
    },
    filters:{
      text(content){
        return content.replace(/<.*?>/ig,"");
      }
    }, 
  }
</script>
<style scoped lang='stylus'>
  .table{
    border: 1px solid #eee;
    box-shadow: 0px 0px 1px 1px #ddd;
    .pagination{
      text-align:center;
      margin:2em 0;
    }
    >>>.el-table{
      tr{
        th {
          background: #f2f2f2;
          .cell{
            font-size: 16px;
          }
        }
        th,td{
          font-size: 15px;
          text-align: center;
          &.el-table-column--selection{
            .cell{
              padding:0 12px;
            }
          }
          .el-image{
            display: flex;
            align-items: center;
            justify-content:center;
          }
          .el-checkbox__inner{
            width:20px;
            height:20px;
            &::after{
              left:6px;
              top:0px;
              width:6px;
              height:14px;
            }
          }
          .el-button--text{
            font-size:14px;
          }
          .el-_inner{
            max-width: 81%;
            cursor: pointer;
            height:auto;
            width: auto;
          }
          .el-image-viewer__close{
            width:50px;
            height:50px;
            font-size:48px;
            .el-icon-circle-close{
              color:red;
            }
          }
          .copy>textarea{
            cursor:pointer;
          }
        }
      }  
    }
  }
</style>